<template>
    <div>
        <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()"></van-nav-bar>
        <input type="file" hidden ref="input" multiple accept=".png,.jpg">
        <van-cell is-link title="头像" @click="$refs.input.click()">
            <van-image round width="0.8rem" height="0.8rem" :src=" userinfo.photo" />
        </van-cell>
        <van-cell is-link title="昵称" @click="isShowName=true">
            <span>{{userinfo.name}}</span>
        </van-cell>
        <van-cell is-link title="性别" @click="isShowGender=true">
            <span>{{userinfo.gender===0?'男':'女'}}</span>
        </van-cell>
        <van-cell is-link title="生日" @click="isShowBirthdody=true">
            <span>{{userinfo.birthday}}</span>
        </van-cell>
        <van-popup v-model="isShowName" position="bottom" :style="{height:'100%'}">
            <UpdataNickName v-if="userinfo.name&&isShowName" :name.sync="userinfo.name" @close="isShowName=false">
            </UpdataNickName>
        </van-popup>
        <van-popup v-model="isShowGender" position="bottom" :style="{height:'30%'}">
            <UpdataGender @close="isShowGender=false" v-if="userinfo.name&&isShowGender" :gender.sync="userinfo.gender">
            </UpdataGender>
        </van-popup>
        <van-popup v-model="isShowBirthdody" position="bottom" :style="{height:'30%'}">
            <UpdataBirthday v-if="userinfo.birthday&&isShowBirthdody" :birthday="userinfo.birthday"
                @close="isShowBirthdody=false" v-model="userinfo.birthday">
            </UpdataBirthday>
        </van-popup>
        <van-popup v-model="isShowAvatar" position="bottom" :style="{height:'100%'}">
            <updataAvatar></updataAvatar>
        </van-popup>
    </div>
</template>

<script>
import UpdataNickName from './componments/updataNickName.vue'
import UpdataGender from './componments/updataGender'
import UpdataBirthday from './componments/updataBirthday'
import updataAvatar from './componments/updataAvatar.vue'
import { getUserProfileAPI } from '@/api'
export default {
    data() {
        return {
            userinfo: {},
            isShowName: false,
            isShowGender: false,
            isShowBirthdody: false,
            isShowAvatar: false
        }
    },
    components: {
        UpdataNickName,
        UpdataGender,
        UpdataBirthday,
        updataAvatar
    },
    created() {
        this.getUserProfile()
    },
    methods: {
        async getUserProfile() {
            const { data } = await getUserProfileAPI()
            this.userinfo = data.data
        }
    }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
    background-color: #3492ff;

    :deep(.van-icon-arrow-left) {
        color: #fff;
    }

    :deep(.van-nav-bar__title) {
        color: #fff;
    }
}
</style>